@import "./def";

// $list_header_height: 2.5rem;
// $list_row_height: 2rem;


.body {
    height: $sub_body_height;
    overflow: hidden;
    --NAME_WIDTH: 373px;
    --SIZE_WIDTH: 131px;
}

.list {
    height: calc($sub_body_height - $row_height);
}

// .header,
// .list_row {
//     display: flex;
//     align-items: center;
//     height: $row_height;
//     &:global(.SCROLLING) {
//         background-color: #3cc;
//     }
// }

.header {
    @include hh($sub_item_height);
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
}

.header_toggle {
    @include wh($resize_toggle_width, 100%);
    cursor: w-resize;
    flex: none;
    user-select: none;
    background-color: $listHeader_bgc;
    &:hover {
        background-color: $resize_toggle_bgc_hover;
    }
    &:global(.active) {
        background-color: $resize_toggle_bgc_active;
        height: 100vh;
        align-self: flex-start;
    }
}

.list_item:global(.idx):hover,
.list_item:global(.idx.active),
.list_row:hover .list_item:global(.idx),
.list_row:global(.active) .list_item:global(.idx) {
    > [type="checkbox"] {
        display: block;
        & + * {
            display: none;
        }
    }
}

.header_item {
    // @extend .item;
    @include ovf;
    padding: $item_padding;
    &:global(.idx) {
        // 序号 & 选择框
        @include abc;
        width: $item_idx_width;
        > [type="checkbox"] {
            display: none;
        }
    }
    &:global(.name) {
        // 文件名
        width:  var(--NAME_WIDTH);
    }
    &:global(.size) {
        // 文件大小
        width:  var(--SIZE_WIDTH);
    }
}

.list_row {
    @include aic;
    height: $sub_item_height;
    // &:hover {
    //     background-color: $row_hover_bgc;
    // }
    // &:global(.selected) {
    //     background-color: $row_active_bgc;
    //     &:hover {
    //         background-color: $row_active_hover_bgc;
    //     }
    // }
}

.list_row_idx {
    @include abc;
    width: $item_idx_width;
}

.list_row_size,
.list_row_name {
    @include aic;
    @include mp(0 3px 0 0, $item_padding);
}

.list_row_name {
    width: var(--NAME_WIDTH);
}

.list_row_size {
    width: var(--SIZE_WIDTH);
}

.list {
    height: calc($sub_body_height - 2.5rem);
    overflow: hidden auto;
}
